<template>
  <div class="list" >
    <!-- 播放菜单头部 -->
    <div class="listhd">
      <div class="listhdc">
        <h4>
          播放列表(
          <span class="j-flag">{{ menu_list ? menu_list.length : 0 }}</span>
          )
        </h4>
        <a href="javascript:;" class="addall"
          ><span class="ico ico-add"></span>收藏全部</a
        >
        <a href="javascript:;" class="clear" data-action="clear"
        @click.stop="this.$parent.del_all()"
          ><span class="ico icn-del"></span>清除</a
        >
        <p class="lytit f-ff0 f-thide j-flag"></p>
        <span class="close" data-action="close" @mousedown="$parent.menuFlag()">关闭</span>
      </div>
    </div>
    <!-- 播放菜单总体 -->
     <div class="listbd">
      <div class="listbdc j-flag" @scroll="scoll" ref="scollBox" >
        <ul class="f-cb" @mouseleave="leave" >
           <li
            v-for="(item, index) in menu_list"
            :key="index"
            :class="{ 'z-sel': class_flag == index }"
            @mouseenter="enter(index)"
            @click="$parent.selec_music(index)"
          >
            <div class="col col-1" :class="{ playicn: num == index }">
              <div></div>
            </div>
            <div class="col col-2">{{ item.name }}</div>
            <div class="col col-3">
              <div class="icns">
                <i
                  class="ico icn-del"
                  title="删除"
                  @click.stop="$parent.del_item(index)"
                ></i>
                <i class="ico ico-dl" title="下载"></i>
                <i class="ico ico-share" title="分享"></i>
                <i
                  class="j-t ico ico-add"
                  title="收藏"
                  @click.stop="sc(index , $event)"
                ></i>
              </div>
            </div>
            <div class="col col-4" v-if="item.ar">
              <a href="javascript:;" v-for="(Aitem , Aindex) in item.ar" :key="Aindex">{{Aitem.name}}<slot v-if="Aindex < item.ar.length -1"> / </slot> </a>
            </div>
            <div class="col col-5" v-if="item.dt">{{item.dt | DT}}</div>
          </li>
        </ul>
      </div>
      <div class="bline j-flag" >
        <span
          class="scrol"
          hidefocus="true"
          :style="[
            {'height': scollheight + 'px'},
            {'display': scollTop_flag},
            {'top': scollTop + 'px'},
          ]"
        ></span>
      </div>
       <div class="listlyric j-flag"  >
        <p class="j-flag" data-time="0" v-show="!lyric_flag">暂且没有更多台词</p>
        <div
          ref="lyric_box"
          v-show="lyric_flag"
          :style="{transform :'translateY('+ scrollup+')' , transition : 'all .5s'}"
        >
          <p
            v-for="(item, index) in lyric_data"
            :key="index"
            :data-time="item.time"
            :class="['j-flag', { sel: index == lineNo - 1 }]"
          >
            {{ item.content }}
          </p>
        </div>
      </div> 
      <!-- <div class="bline bline-1 j-flag">
        <span
          class="scrol scrol-1 j-flag"
          style="height: 23.4128px; display: block; top: 0px"
        ></span>
      </div> -->
    </div>
  </div>
</template>
<script>
 import { lyric } from "../../network/song";
import {Time} from '../tool/tool'
export default {
  props: ['num' ,'CT' , 'data'],
  data() {
    return {
      class_flag: this.num,   //歌曲目录表中被选中的样式
      menu_list:[], //歌曲列表
      scollheight:260  , //滚动条长度
      scollTop:0,     // 滚动条距离上面的距离
      scollTop_flag:'none',
       lyric_flag: false, //歌词 有/无 的提示
       lyric_data: [], //歌词数据
       resetlyric_data :[],
       select_ms: true, //选择的歌曲
       Time: 0,   //歌曲滚动的时长
       lineNo: 0 ,
       scrollup :0,//向上滚动
    };
  },
  filters:{
     DT(value){
       return Time(value)
     }
  },
  methods: {
    queryTop(){   //这里非常扯淡 主要作用当歌曲进来 让列表上移 把最后一首歌曲显示出来
        if(this.menu_list.length && this.menu_list.length *28 >= 260){
              let TOP = (this.menu_list.length*28 - 260)/(this.menu_list.length*28)
              this.scollTop_flag ='block'
              this.scollTop =  Math.round(TOP*260)
              this.scollheight = 260 - TOP*260
              this.$nextTick(() => {
                this.$refs.scollBox.scrollTop = (this.menu_list.length*28 - 260)
              })
        }
    },
    scoll(e){   //滑轮滚动
      this.scollTop = this.$refs.scollBox.scrollTop / (this.menu_list.length*28)*260
    },
    enter(index){
       this.class_flag = index;
    },
    leave() {       //鼠标离开 和离开每一个li 变化的样
     this.class_flag = parseInt(this.num);
    },
    res_lyric(id) { //获取对应歌词
     this.lyric_data = []
     this.resetlyric_data = []
      lyric(id).then(  
       (res) => {
          if (res.data.nolyric) {     //如果nolyric 表示没有歌词  
            this.lyric_flag = false;
            return;
          }
         this.lyric_flag = true;
         var lyric = res.data.lrc.lyric.split("\n")  //将json字符串歌词 分解成数组
         lyric.forEach((item) => {    //遍历每一段歌词
           var split_Item = item.split("]")
           if(split_Item.length == 2){   //如果歌词是以这种形式 [00:123] xxxxxxx 正常
             var obj = {}
               var t  = split_Item[0].substr(1 , split_Item[0].lentth)
               obj.time = (t.split(":")[0] * 60 + parseFloat(t.split(":")[1]))
               obj.content = split_Item[1]
              this.lyric_data.push(obj)
           }else{                       //如果歌词是以这种形式 [00:123][00:47] xxxxxxx 非正常
              for (let index = 0; index < split_Item.length -1; index++) {
                var obj2 = {}
                var t1 = split_Item[index].substr(1 , split_Item[index].length)
                 obj2.time = (t1.split(":")[0] * 60 + parseFloat(t1.split(":")[1]))
                 obj2.content = split_Item[split_Item.length -1]
                this.resetlyric_data.push(obj2)
              }
             }
          })
           this.resetlyric()
         },
        (err) => {
          console.log("歌词获取失败");
        });
     },
    resetlyric(){                   //将上面这种形式 [00:123][00:47] xxxxxxx 的歌词重新排列为正常的歌词
       if(this.resetlyric_data.length){
         var arr = this.lyric_data.concat(this.resetlyric_data)
          for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < arr.length -1 - i; j++) {
              if (arr[j].time > arr[j+1].time){
                  var temp = arr[j+1]  
                    arr[j+1] = arr[j] 
                    arr[j] = temp   
              }  
            }
          }
          this.lyric_data =  arr
       }
     },
     sc(index , e) {   //点击收藏歌曲
       if (!this.$store.state.userId) {
         this.$Alter.show("还没有登录哦", 2000);
         return;
       }
       this.$parent.menu_flag = false
      this.$SC.isshow( e.pageY-200, this.menu_list[index].id);
     },
     drag(T){     //拖动音乐滚动条定位到相应歌词高亮
       if(this.lyric_data){
        var filter_data = this.lyric_data.filter(item => {
          return  item.time <= T.toFixed(3)
        })
         var lineNo = this.lyric_data.indexOf(filter_data[filter_data.length -2])
         this.scrollup = -(lineNo-3)*32 +'px'
         this.lineNo = lineNo
         this.lineHeight(T.toFixed(3))
       }
     },
    lineHeight(T){
      //歌词高亮
        if(this.lineNo == this.lyric_data.length -1){
          return
        }
        if (parseFloat(this.lyric_data[this.lineNo].time) <= T && this.lyric_data) {
          this.lineNo++
           if ( this.lineNo >=3) {
             this.scrollup =  - (this.lineNo-3)*32 +'px'
           }
      }
    }
  },
  watch: {
    num(v) {   //监听传过来的歌曲索引【就是上一首 下一首改变的值】
      this.class_flag = v
      this.lineNo = 0
    },
    CT:function(v) {   //监听传过来的歌曲播放音频的当前位置
      if (this.lyric_data.length && v >= 0) {  //判定 有歌词 才进行高亮
         this.lineHeight(v.toFixed(3))
      } 
    },
      data(v){
         this.menu_list = v
      }
   },
   created(){
     this.menu_list= sessionStorage.play_ids? JSON.parse(sessionStorage.getItem("play_ids")) : [];
     this.class_flag = sessionStorage.num ? sessionStorage.num :null
   }
 }
</script>

<style >
@import url("./playmusic_style/playmusic_menu.css");
</style>